<template>
    <div class="photoinfo-box">
        <!-- 头部标题 -->
        <h1>{{photoinfo.title}}</h1>
        <div class="time-clcik">
            <span class="time">发表于: {{photoinfo.add_time | dateFormat('YYYY-MM-DD')}}</span>
            <span class="click">点赞: {{photoinfo.click}}</span>
        </div>

        <hr>

        <!-- 缩略图预览 -->
        <div class="thumbnail">
            <vue-preview :slides="list"></vue-preview>
        </div>

        <!-- 内容区域 -->
        <div class="content" v-html="photoinfo.content"></div>

        <!-- 评论子组件 -->
        <cmt-box :id="id"></cmt-box>
    </div>
</template>

<script>
import comment from '../subcomponents/Comment.vue'
export default {
    data () {
        return {
            id: this.$route.params.id, // 图片id
            photoinfo: {},  // 图片内容对象
            list: []  // 缩略图数组
        }
    },

    created() {
        this.getPhotoInfoContent(),
        this.getThumbnailList()
    },

    methods: {
        // 获取图片内容
        getPhotoInfoContent(){
            this.$http.get('api/getimageInfo/' + this.id).then(res=>{
                if (res.body.status === 0) {
                    this.photoinfo = res.body.message[0];
                } else {
                    Toast('获取图片详情内容失败');
                }
            })
        },

        // 获取缩略图
        getThumbnailList(){
            this.$http.get('api/getthumimages/' + this.id).then(res=>{
                // console.log(res);
                if (res.body.status === 0) {
                    res.body.message.forEach(item=>{
                        item.w = 600;
                        item.h = 400;
                        item.msrc = item.src;
                    })
                    this.list = res.body.message;
                }
            })
        }
    },

    components: {
        'cmt-box': comment
    }
  
}
</script>

<style lang="less">
    .photoinfo-box {
        padding: 10px;
        h1 {
            font-size: 16px;
            text-align: center;
            color: #26a2ff;
            line-height: 30px;
        }

        .time-clcik {
            display: flex;
            justify-content: space-between;
            color: #666;
            font-size: 13px;
        }

        .content {
            font-size: 14px;
            color: #333;
        }

        .thumbnail{
            .my-gallery{
                display: flex;
                flex-wrap: wrap;
                figure {
                    margin: 10px;
                    box-shadow: 0 0 10px #999;
                    img{
                        width: 100px;
                        vertical-align: middle;
                    }
                }
            }
        }
    }
</style>

